<script setup lang="ts">
import { homeApi } from '@/api/Api';
import { ref } from 'vue';
import { Tools, CopyDocument, Box, Guide } from '@element-plus/icons-vue';
const logins = ref([])
homeApi.getLogins({
    page_index: 1, success: (data: any) => {
        logins.value = data
    }, fail: (err: any) => {
        console.log(err)
    }
})
const topIcon = { "插件管理": Guide, "镜像管理": CopyDocument, "镜像市场": Box, "系统设置": Tools }

</script>

<template>
    <div style="height: var(--ingres-top-bar); min-width: 1200px;">
        <div id="home-left-page">
            <div class="common-layout" style="height: 100%;">
                <el-container style="height: 100%;">
                    <el-header style="height: 130px; ">
                        <el-container>
                            <div style="width: 100%; display: inline-block; text-align: center;">
                                <div style="max-width: 900px;display: inline-block;">
                                    <el-aside v-for='icon, name in topIcon' class="home-left-header">
                                        <div>
                                            <div>
                                                <el-avatar :icon="icon"  shape="square" :size="50" />
                                                <br />
                                                <span style="font-size: 14px;">{{ name }}</span>
                                            </div>
                                        </div>
                                    </el-aside>
                                </div>
                            </div>
                        </el-container>
                    </el-header>
                    <el-container>
                        <el-aside width="200px">Aside</el-aside>
                        <el-main>Main</el-main>
                    </el-container>
                </el-container>
            </div>
        </div>

        <div id="home-right-page">
            <el-card class="box-card" style="background-color: aliceblue; text-align: center;">
                <div class="text item">
                    在线用户
                </div>
            </el-card>
            <el-card class="box-card" v-for="o in logins" :key="o" style=" text-align: center;">
                <div class="text item">
                    {{ '用户:' + (<any>o).username }}<br />
                    {{ '邮箱:' + (<any>o).email }}<br />
                    {{ '上次登录时间:' + (<any>o).last_login }}<br />
                </div>
            </el-card>
        </div>
    </div>
</template>

<style scoped>
.home-left-header {
    float: left;
    height: 110px;
    padding: 10px;
    margin: 5px;
    width: calc(100% / 4 - 10px);
    box-shadow: var(--el-box-shadow-dark);
}

.home-left-header>div {
    width: 150px;
    height: 100%;
    background-color: #fff;
    display: flex;
    margin: auto;
    justify-content: center;
    align-items: center;
    box-shadow: var(--el-box-shadow);
}

.home-left-header>div>div {
    justify-self: center;
    text-align: center;
}

.home-left-header>div>div>span:nth-child(1) {
    background-color: #fff;
    height: 39px;
    font-size: 36px;
    color: rgba(86, 198, 198, 0.764);
}

#home-left-page {
    width: calc(100% - 350px);
    height: 100%;
    background-color: #bdbdbd7c;
    float: left;
}

#home-right-page {
    width: 350px;
    height: 100%;
    overflow-y: scroll;
    float: right;
}

::-webkit-scrollbar {
    width: 2px;
    background-color: #ffffff;


}

::-webkit-scrollbar-thumb {
    background-color: #636363d7;
}
</style>